<template>
  <!-- 新闻详情 -->
  <div
    :class="['Detail', { mobile: $isMobile }]"
    v-if="info"
  >
    <div class="g-con">
      <div
        class="top"
        v-if="$isMobile"
      >
        {{ t('header.menu2') }}
      </div>

      <div class="g-ad">
        <a
          :href="getAd('6', 'href')"
          target="_blank"
        >
          <img
            :src="getAd('6', 'image')"
            alt=""
          />
        </a>
      </div>
      <div class="breadcrumb flexsb">
        <div class="flexsc">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">{{ t('home') }}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/news' }">
              {{ t('header.menu2') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: '/news' }"
              v-if="route.query?.name"
              >{{ route.query.name }}</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ t('news.NewsDetail') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="g-con grid">
        <div class="left">
          <div class="container">
            <div class="title flexsc">{{ info.newTitle }}</div>
            <div class="author flexsb mt-2">
              <div class="flexsc">
                <img
                  class="avatar mr-1"
                  :src="info.publishUserAvatar || defaultAvatar"
                  alt=""
                />
                {{ info.publishUserName }} · {{ dateFormat(info.createTime, 3) }}
              </div>
              <div class="share flexec">
                <img
                  src="@/assets/img/icon_link.png"
                  alt=""
                  @click="shareFn('link')"
                />
                <img
                  src="@/assets/img/icon_facebook.png"
                  alt=""
                  @click="shareFn('QRCode')"
                />
                <img
                  src="@/assets/img/icon_tite.png"
                  alt=""
                  @click="shareFn('QRCode')"
                />
                <img
                  src="@/assets/img/icon_xinlang.png"
                  alt=""
                  @click="shareFn('QRCode')"
                />
                <img
                  src="@/assets/img/icon_weixin.png"
                  alt=""
                  @click="shareFn('QRCode')"
                />
              </div>
            </div>
            <div
              class="info mt-3"
              v-html="info.newContent"
            ></div>
          </div>
          <!-- <div class="bottom flexcc-col mt-8">
            <div class="mt-1">{{ t('news.like') }}</div>
            <div class="mt-1">
              <el-button
                type="primary"
                :color="info.isLike > 0 ? '' : '#EAEBEC'"
                style="width: 130px"
                @click="handleLike"
              >
                <img
                  src="@/assets/img/icon_dianzan_nor.png"
                  alt=""
                  class="mr-1"
                />
                {{ info.likeNum }}
              </el-button>
            </div>
          </div> -->
        </div>
        <div class="right">
          <div class="latest">
            <div class="tit">{{ t('news.latestNews') }}</div>
            <div class="con">
              <div class="list">
                <div
                  class="item line-2"
                  v-for="{ id, newTitle } in listData"
                  :key="id"
                  @click="openUrl(`/detail`, {id})"
                >
                  {{ newTitle }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="QrCodeVis"
      :title="t('blog.dlt2')"
      width="400px"
      destroy-on-close
      center
    >
      <div class="flexcc">
        <img
          :src="currentLinkImg"
          class="qrcode"
          height="200"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { dateFormat, openUrl } from '@/utils'
import { getNewsDetailApi, likeApi, cancelLikeApi, getNewsListApi } from '@/service/news'
import { qrCode } from '@/service/common'
import useLogin from '@/stores/login'
import useAd from '@/stores/ad'
import useClipboard from 'vue-clipboard3'
import useNews from '@/stores/news'

const { toClipboard } = useClipboard()
const copy = async (text) => {
  try {
    await toClipboard(text)
    ElMessage.success(t('news.copy'))
  } catch (e) {}
}

const store = useNews()
const { setState } = store

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

onBeforeMount(() => {
  let url = window.location.href;
  let params = url.split('?')[1].split('=');
  let lang =  params[params.length-1]
  if(lang == 'zh-CN' || lang == 'en'){
    localStorage.setItem('lang',lang)
  }
  init()
})

const router = useRouter()
const route = useRoute()
watch(
  () => route.query,
  (n) => {
    getDetail()
  }
)

const storeLogin = useLogin()
const storeAd = useAd()
const { getAd } = storeAd

const { t, locale } = useI18n()
watch(locale, (n) => {
  // init()
  openUrl('/news')
  setState(null)
})

// 详情
const info = ref(null)
const getDetail = () => {
  const id = route.query.id
  if (!id) return
  getNewsDetailApi(id).then(({ data }) => {
    info.value = data
  })
}

// 列表
const listData = ref([])
const getList = () => {
  const params = { pageNum: 1, pageSize: 5 }
  getNewsListApi(params).then(({ rows, total: t }) => {
    listData.value = rows
  })
}

// 默认头像
const defaultAvatar = new URL('@/assets/img/icon_touxiang_01.png', import.meta.url)

//分享
const currentLinkImg = ref('')
const QrCodeVis = ref(false)
const shareFn = (type) => {
  if (type == 'link') {
    copy(window.location.href +'&lang='+ localStorage.getItem('lang'))
  }

  if (type == 'QRCode') {
    qrCode({ link: window.location.href }).then((res) => {
      currentLinkImg.value = window.URL.createObjectURL(res)
      QrCodeVis.value = true
    })
  }
}

// 点赞
const likeLoading = ref(false)
const handleLike = () => {
  if (likeLoading.value) return
  likeLoading.value = true
  const params = { customerId: storeLogin?.userInfo?.id, objId: route.query.id, objType: 0 }
  const apiFn = info.value.isLike > 0 ? cancelLikeApi : likeApi
  apiFn(params)
    .then(() => {
      // getDetail()
      info.value.isLike > 0 ? info.value.isLike-- : info.value.isLike++
    })
    .finally(() => {
      likeLoading.value = false
    })
}

//
const init = () => {
  getDetail()
  getList()
}
</script>

<style scoped lang="scss">
.Detail {
  .breadcrumb {
    padding: 30px 0;
    // border-bottom: 2px solid #eaebec;
  }
  .share {
    img {
      height: 24px;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  .main {
    background: #f5f5f5;
    padding: 30px 0 100px;
    margin-bottom: -76px;
    .grid {
      display: grid;
      grid-template-columns: 830px auto;
      gap: 20px;
    }
    .left {
      background: #fff;
      padding: 60px 40px;
      border-radius: 4px;
      min-height: 600px;

      .container {
        // padding: 70px 0;
        .title {
          font-size: 28px;
          font-weight: bold;
        }
        .author {
          color: #9d9fa5;
          .avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
        }
        .info {
          color: #6a6973;
          line-height: 1.6;
          word-break: break-all;
          :deep(img) {
            max-width: 100%;
          }
          :deep(u) {
            font-size: inherit !important;
          }
          :deep(em) {
            font-size: inherit !important;
          }
          :deep(strong) {
            font-size: inherit !important;
          }
        }
      }
    }
    .right {
      .latest {
        background: #fff;
        border-radius: 4px;
        .tit {
          padding: 28px;
          border-bottom: 1px solid #eaebec;
          text-transform: uppercase;
          font-weight: bold;
          color: #252628;
        }
        .con {
          padding: 28px;
          .list {
            display: grid;
            // grid-template-rows: repeat(5, 1fr);
            gap: 30px;
          }
          .item {
            cursor: pointer;
            &:hover {
              color: var(--mainColor);
            }
          }
        }
      }
    }
  }

  &.mobile {
    .top {
      background: #252628;
      color: #fff;
      padding: 12px 20px;
      font-weight: bold;
    }
    .g-con {
      width: 100%;
      padding: 0;
    }
    .author {
      justify-content: flex-start;
    }
    .breadcrumb {
      display: none;
    }

    .main {
      padding: 0;
      margin: 0;
      .grid {
        display: block;
      }
      .left {
        padding: 40px 10px;
        min-height: none;
        .info {
          :deep(video) {
            max-width: 100%;
          }
        }
      }
      .right {
        display: none;
      }
    }
  }
}
</style>
